<template>
  <!-- 库存现有量 -->
  <div class="page-container" style="flex-direction: row">
    <div class="page-left fx-sk mg-rt-16 pd-24 bg-fff bd-rd-8">
      <TrScrollcolumn
        v-model="paramNameId"
        url="/api/trio-system/param-config/left/page"
        title="参数列表"
        labelProp="paramName"
        valueProp="id"
        searchProp="paramName"
        @itemClick="paramNameClickHandle"
      />
    </div>

    <div class="page-right fx fx-cl bd-rd-8 fx-full wd-0">
      <div class="common-content-wrap">
        <TrTable
          ref="trTable"
          rowKeyStr="detailId"
          isNeedSelection
          isNeedIndex
          v-model="searchParams"
          :btnList="btnList"
          :searchShowList="searchShowList"
          :searchHideList="searchHideList"
          :tableData="tableData"
          :tableColumn="tableColumn"
          :total="totalNum"
          :isNeedInit="false"
          requestName="searchHandle"
          @add="addHandle"
          @delete="deleteAxios"
          @rowEdit="editHandle"
        />
      </div>
    </div>
    <TrEditPopup
      ref="TrEditPopup"
      v-model="isShowEdit"
      :width="480"
      :labelWidth="114"
      :title="currentTitle"
      :valueObj.sync="form"
      :formData="formData"
      :list="formList"
      @close="addEditClose"
      @confrim="addEditConfirm"
      @select-change="selectChange"
    />
  </div>
</template>

<script>
import {
  getList,
  save,
  update,
  deletes,
  leftPage,
} from "@/api/system/configParam.js";
import enumData from "@/utils/enumCode.js";

import TrTable from "@/components/Tr-table/Tr-table.vue";
import TrEditPopup from "@/components/Tr-edit/Tr-edit-popup.vue";
import TrScrollcolumn from "@/components/Tr-scroll-column/Tr-scroll-column.vue";
export default {
  name: "configParamView",
  components: {
    TrTable,
    TrEditPopup,
    TrScrollcolumn,
  },
  data: () => ({
    paramNameId: "",
    tableSelectRows: [],
    currentType: "add",
    currentTitle: "新增",
    btnList: [
      {
        label: "新增",
        option: "add",
        color: "blue",
      },
      {
        label: "删除",
        option: "delete",
        color: "white",
        isRelaTable: true,
      },
    ],
    totalNum: 0,
    tableData: [],
    searchParams: {
      current: 1,
      size: 10,
      dimensionCategory: "",
    },
    searchShowList: [
      {
        id: "dimensionCategory",
        label: "维度分类",
        type: "select",
        multiple: true,
        isNeed: false,
        filterable: true,
        width: 33.3,
        list: [],
        value: [],
      },
    ],
    searchHideList: [],
    tableColumn: [
      {
        type: "text",
        label: "配置中心名称",
        value: "paramName",
      },
      {
        type: "text",
        label: "维度分类",
        value: "dimensionCategoryName",
      },
      {
        type: "text",
        label: "维度分类值",
        value: "dimensionCategoryValueName",
      },
      {
        type: "text",
        label: "配置参数值",
        value: "configParamValue",
      },
      {
        type: "text",
        label: "配置中心说明",
        value: "remark",
      },
      {
        type: "option",
        label: "操作",
        fixed: "right",
        width: 80,
        showBtnList: [
          {
            label: "编辑",
            option: "rowEdit",
          },
        ],
      },
    ],

    isShowEdit: false,
    form: {
      paramName: "",
      id: "",
      dimensionCategory: "",
      dimensionCategoryValue: "",
      configParamValue: "",
      remark: "",
    },
    formData: {},
    formList: [
      {
        id: "paramName",
        label: "配置中心名称",
        type: "select",
        filterable: true,
        width: 100,
        disabled: true,
        list: [],
        value: "",
      },
      {
        id: "dimensionCategory",
        label: "维度分类",
        type: "select",
        filterable: true,
        width: 100,
        list: [],
        value: "",
      },
      {
        id: "dimensionCategoryValue",
        label: "维度分类值",
        type: "loadselect",
        isShow: true,
        width: 100,
        currentErrorLabel: "请选择维度",
        errorStatus: false,
        selectedLabel: "",
        reviewLabel: "dimensionCategoryValueName",
        disabled: true,
        isSaveLoad: false,
        requestObj: {
          url: "/api/trio-system/param-config/dimension-options/page",
          method: "post",
          searchKey: "name",
          rlLabel: "name",
          rlValue: "id",
          resultKey: "data,data,records",
        },
        defaultParams: {},
      },
      {
        id: "configParamValue",
        label: "配置参数值",
        type: "select",
        filterable: true,
        width: 100,
        list: [],
        value: "",
      },
      {
        id: "remark",
        label: "配置中心说明",
        type: "textarea",
        width: 100,
        value: "",
        isNeed: false,
      },
    ],
  }),
  computed: {
    detailIds() {
      return this.$refs.trTable.selectionList.map((row) => row.detailId);
    },
  },
  watch: {
    isShowEdit: {
      handler(newVal) {
        if (newVal) {
          this.formData = {
            ...this.formData,
            paramName: this.currentLeftObj.paramName,
          };
        }
      },
    },
  },
  methods: {
    paramNameClickHandle(event) {
      this.currentLeftObj = event;
      this.getListHandle();
    },
    async initParamNameId() {
      const axiosObj = {
        current: 1,
        size: 20,
      };
      const { data: res } = await leftPage(axiosObj);
      if (res.data.records.length > 0) {
        this.paramNameId = res.data.records[0].id;
        this.currentLeftObj = res.data.records[0];
      } else {
        this.paramNameId = "";
        this.currentLeftObj = {};
      }
    },
    async saveAxios() {
      await this.$textShow({
        title: this.$t("tip.label"),
        content: [`是否确认新增?`],
      });
      this.form.id = this.paramNameId;
      await save(this.form);
      this.getListHandle();
      this.addEditClose();
      this.$message.success(this.$t("msg.success"));
    },
    async editAxios() {
      await this.$textShow({
        title: this.$t("tip.label"),
        content: [`是否确认编辑?`],
      });
      this.form.detailId = this.formData.detailId;
      this.form.paramId = this.paramNameId;
      await update(this.form);
      this.getListHandle();
      this.addEditClose();
      this.$message.success(this.$t("msg.success"));
    },
    async deleteAxios() {
      await this.$textShow({
        title: this.$t("tip.label"),
        content: [this.$t("tip.delete")],
      });
      await deletes({ detailIds: this.detailIds });
      this.getListHandle();
      this.$message.success(this.$t("msg.success"));
    },
    async getListHandle() {
      this.searchParams.id = this.paramNameId;
      const { data: res } = await getList(this.searchParams);
      this.$validateData(res.data.records);
      this.tableData = res.data.records;
      this.totalNum = res.data.total;
      this.$refs.trTable.clearSelect();
    },
    searchHandle() {
      this.getListHandle();
    },
    addHandle() {
      this.isShowEdit = true;
      this.currentType = "add";
      this.currentTitle = "新增";
    },
    editHandle(row) {
      this.currentTitle = "编辑";
      this.currentType = "rowEdit";
      this.$validateData(row, 3);
      this.formData = row;
      const dimensionCategoryValueObj = this.$findByProperty(
        this.formList,
        "id",
        "dimensionCategoryValue"
      );
      this.$set(dimensionCategoryValueObj, "disabled", false);
      const defaultParams = {
        dimensionCategory: row.dimensionCategory,
        current: 1,
      };
      this.$set(dimensionCategoryValueObj, "defaultParams", defaultParams);
      const paramNameObj = this.$findByProperty(
        this.formList,
        "id",
        "paramName"
      );
      this.$set(paramNameObj, "disabled", true);
      this.isShowEdit = true;
    },
    addEditConfirm() {
      switch (this.currentType) {
        case "add":
          this.saveAxios();
          break;
        case "rowEdit":
          this.editAxios();
          break;
      }
    },
    addEditClose() {
      const dimensionCategoryValueObj = this.$findByProperty(
        this.formList,
        "id",
        "dimensionCategoryValue"
      );
      this.$set(dimensionCategoryValueObj, "disabled", true);
      this.$set(dimensionCategoryValueObj, "defaultParams", {});

      this.formData = {};
      this.form = {};
      this.isShowEdit = false;
    },
    selectChange(event) {
      if (event.id == "dimensionCategory") {
        const cloneList = this.$refs.TrEditPopup?.$refs.trEdit?.cloneList;
        const paramDimensionObj = this.$findByProperty(
          cloneList,
          "id",
          "dimensionCategory"
        );
        const dimensionCategoryValueObj = this.$findByProperty(
          cloneList,
          "id",
          "dimensionCategoryValue"
        );
        this.$set(dimensionCategoryValueObj, "list", []);
        this.$set(dimensionCategoryValueObj, "value", "");
        if (!this.isNull(paramDimensionObj.value)) {
          const defaultParams = {
            dimensionCategory: paramDimensionObj.value,
            current: 1,
          };
          this.$set(dimensionCategoryValueObj, "defaultParams", defaultParams);
          this.$set(dimensionCategoryValueObj, "disabled", false);
        } else {
          this.$set(dimensionCategoryValueObj, "disabled", true);
        }
      }
    },
    isNull(value) {
      return value == "" && value !== 0;
    },
    async initHandle() {
      const { paramDimensionEnum } = await this.$fetchEnumApi("trio-system", [
        "paramDimensionEnum",
      ]);

      const paramDimensionObj = this.$findByProperty(
        this.formList,
        "id",
        "dimensionCategory"
      );
      paramDimensionObj ? (paramDimensionObj.list = paramDimensionEnum) : "";

      const dimensionCategoryObj = this.$findByProperty(
        this.searchShowList,
        "id",
        "dimensionCategory"
      );
      dimensionCategoryObj
        ? (dimensionCategoryObj.list = paramDimensionEnum)
        : "";

      const resValue = await this.$fetchEnumData([enumData.configCenterValue]);
      const configParamValueObj = this.$findByProperty(
        this.formList,
        "id",
        "configParamValue"
      );
      configParamValueObj.list = resValue[enumData.configCenterValue];
    },
  },
  async created() {
    this.initHandle();
    await this.initParamNameId();
    this.getListHandle();
  },
};
</script>
